---

import I18nKey from "../../i18n/i18nKey";
import { i18n } from "../../i18n/translation";
import { getTagList } from "../../utils/content-utils";
import { getTagUrl } from "../../utils/url-utils";
import ButtonTag from "../control/ButtonTag.astro";
import WidgetLayout from "./WidgetLayout.astro";

const tags = await getTagList();

const COLLAPSED_HEIGHT = "7.5rem";

const isCollapsed = tags.length >= 20;

interface Props {
	class?: string;
	style?: string;
}
const className = Astro.props.class;
const style = Astro.props.style;
---
{
    tags.length > 0 &&
    <WidgetLayout name={i18n(I18nKey.tags)} id="tags" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
        <div class="flex gap-2 flex-wrap">
            {tags.map(t => (
                <ButtonTag href={getTagUrl(t.name)} label={`View all posts with the ${t.name.trim()} tag`}>
                    {t.name.trim()}
                </ButtonTag>
            ))}
        </div>
    </WidgetLayout>
}
